<template>
  <div class="feePayList">
    <van-nav-bar
      :title="type == 3 ? '合作费支付记录' : '合作费收到记录'"
      left-arrow @click-left="$router.back()"
    />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="container">
        <div v-if='noData' class="noData">
          {{type == 3 ? '暂无合作费支付记录' : '暂无合作费收到记录'}}
        </div>
        <template v-else>
          <van-list v-model="loading" :finished="finished" finished-text="- 没有更多了 -" @load="onLoad"
                    :offset="130">
            <div v-for="item in feePayList" :key="item.job_user_id" class="salary_item">
              <van-row type="flex" justify="space-between" align="center" class="row_info">
                <van-col span="22">
                  支付时间：
                  <span>{{item.cooperation_pay_time}}</span>
                </van-col>
              </van-row>

              <van-row type="flex" justify="space-between" align="center" class="row_info">
                <van-col span="11">
                  合作费类型：
                  <span>{{ item.downstream_cooperation_fee | formatMoney }}
                                        元/{{ item.cooperation_fee_unit| formatFeeUnit}}</span>
                </van-col>
                <van-col span="11">
                  工作时长：
                  <span>{{ item.work_duration }} {{ item.cooperation_fee_unit | formatFeeUnit }}</span>
                </van-col>
              </van-row>
              <van-row type="flex" justify="space-between" align="center" class="row_info">
                <van-col span="22">
                  支付金额：
                  <span style="font-weight: bold; color: black;">{{ item.cooperation_money }}元</span>
                </van-col>
              </van-row>
              <!-- <van-row type="flex" justify="space-between" align="center" class="row_info">
                  <van-col span="11">
                      代招人实得金额：
                      <span style="font-weight: bold; color: black;">{{ item.parentUserCost }}元</span>
                  </van-col>
                  <van-col span="11">
                      平台收取金额：
                      <span style="font-weight: bold; color: black;">{{ item.platformUserIdCost }}元</span>
                  </van-col>
              </van-row> -->
            </div>
          </van-list>
        </template>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import {Toast} from 'vant';
import {formatMoney, formatFeeUnit} from '@/utils/format';

export default {
  name: "getOrPayFeeRecord",
  data() {
    return {
      page: 0,
      loading: false, // 当loading为true时，转圈圈
      finished: false, // 数据是否请求结束，结束会先显示- 没有更多了 -
      feePayList: [],
      noData: false, // 如果没有数据，显示暂无数据
      isLoading: false, // 下拉的加载图案

      jobuserid: '',
      jobid: '',
      type: '',
    }
  },
  components: {},

  created() {
    this.jobid = this.$route.query.JobId
    this.jobuserid = this.$route.query.JobUserId;
    this.type=this.$route.query.type;
  },

  mounted() {},
  methods: {
    // 获取合作费列表
    getGenerationHiringFeeList() {
      let params = {
        PageSize: 10,
        PageIndex: this.page,
        JobId: this.jobid,
        JobUserId: this.jobuserid
      }
      this.$api.myCompany.getCooperationPayFeeList(params).then(res => {
        this.loading = false
        if (res.code === 200) {
          if (res.data.count == 0 && this.page === 0) {
            this.noData = true
            return
          }

          if (res.data.items && res.data.items.length > 0) {
            this.feePayList = res.data.items;
            this.page++
          } else {
            // 如果加载完毕，显示没有更多了
            this.finished = true
          }
        } else {
          Toast('请求失败请重试！')
        }
      })
    },
    // 列表加载
    onLoad() {
      setTimeout(() => {
        this.getGenerationHiringFeeList()
        this.loading = true
      }, 2000)
    },
    onRefresh() {
      setTimeout(() => {
        // 重新初始化这些属性
        this.isLoading = false
        this.feePayList = []
        this.page = 1
        this.loading = false
        this.finished = false
        this.noData = false
        // 请求信息
        this.getGenerationHiringFeeList()
      }, 2000)
    },

    // 合作费详情
    /*goToSalaryDetailPage(salaryInfoId) {
      this.$router.push({
        path: `/wageDetail/${this.jobid}`,
        query: {
          jobuserid: this.jobuserid,
          salaryinfoid: salaryInfoId
        }
      })
    }*/
  },
  filters: {
    formatMoney(money) {
      return formatMoney(money)
    },
    formatFeeUnit(feeUnit) {
      return formatFeeUnit(feeUnit)
    }
  }
}
</script>

<style lang="scss" scoped>
.feePayList {
  .noData {
    display: inline-block;
    width: 100%;
    margin: 5% auto;
    min-height: 80vh;
    color: #323233;
    font-weight: 500;
    font-size: 0.42667rem;
    text-align: center;
  }

  .salary_item {
    background-color: #ffffff;
    border-bottom: 0.6px solid #e6e6e6;
    margin: 0;
    padding: 9px 10px;
    font-size: 13px;
    color: #848484;

    .row_info {
      margin-top: 5px;
      flex-wrap: nowrap;
      .btn {
        text-align: right;
        white-space: nowrap;
      }
    }
  }
}
</style>
